<template>
  <div>
    <el-card>
      <div slot="header">
        <span>报名审核</span>
      </div>
      <div>
        <el-table :data="registrationList" style="width: 100%" v-loading="loading">
          <el-table-column prop="event.eventName" label="赛事名称"></el-table-column>
          <el-table-column prop="team.teamName" label="参赛队伍"></el-table-column>
          <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
              <el-tag :type="getStatusTagType(scope.row.status)">
                {{ formatStatus(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="220">
            <template slot-scope="scope">
              <el-button 
                v-if="scope.row.status === 'pending'"
                @click="handleApprove(scope.row.registrationId)"
                type="success" 
                size="mini"
              >
                通过
              </el-button>
              <el-button 
                v-if="scope.row.status === 'pending' || scope.row.status === 'approved'"
                @click="handleReject(scope.row.registrationId)"
                type="danger" 
                size="mini"
              >
                拒绝
              </el-button>
              <el-button 
                v-if="scope.row.status === 'rejected'"
                @click="handleApprove(scope.row.registrationId)"
                type="success" 
                size="mini"
              >
                通过
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      registrationList: [],
      loading: false,
      organizerId: null
    };
  },
  
created() {
  this.organizerId = this.$store.getters.userId || sessionStorage.getItem('userId');
  if (!this.organizerId) {
    this.$message.error('未获取到主办方ID，请重新登录');
    this.$router.push('/login');
    return;
  }
  this.fetchRegistrations();
},
  methods: {
    async fetchRegistrations() {
      this.loading = true;
      try {
        const response = await axios.get(
          `http://localhost:10086/organizer/registrations?organizerId=${this.organizerId}`
        );
        this.registrationList = response.data.data;

      } catch (error) {
        console.error('获取报名列表失败:', error);
        console.log('请求URL:', error.config.url);
        console.log('响应数据:', error.response?.data);
        this.$message.error('获取报名列表失败: ' + (error.response?.data?.message || error.message));
      } finally {
        this.loading = false;
      }
    },
    formatStatus(status) {
      const statusMap = {
        'pending': '待审核',
        'approved': '已通过',
        'rejected': '已拒绝'
      };
      return statusMap[status] || status;
    },
    getStatusTagType(status) {
      const typeMap = {
        'pending': 'warning',
        'approved': 'success',
        'rejected': 'danger'
      };
      return typeMap[status] || '';
    },
    handleApprove(registrationId) {
      this.$confirm('确定要通过此报名申请吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await axios.put(`http://localhost:10086/organizer/registration/${registrationId}/approve`);
          this.$message.success('已通过报名申请');
          this.fetchRegistrations();
        } catch (error) {
          console.error('操作失败:', error);
          this.$message.error('操作失败: ' + (error.response?.data?.message || error.message));
        }
      }).catch(() => {
        this.$message.info('已取消操作');
      });
    },
    handleReject(registrationId) {
      this.$confirm('确定要拒绝此报名申请吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await axios.put(`http://localhost:10086/organizer/registration/${registrationId}/reject`);
          this.$message.success('已拒绝报名申请');
          this.fetchRegistrations();
        } catch (error) {
          console.error('操作失败:', error);
          this.$message.error('操作失败: ' + (error.response?.data?.message || error.message));
        }
      }).catch(() => {
        this.$message.info('已取消操作');
      });
    }
  }
};
</script>

<style scoped>
.el-card {
  margin: 20px;
}
.el-table {
  margin-top: 10px;
}
</style>